<template>
  <div class="dashboard">
    <div class="count-wrap">
      <div class="count-item" @click="$router.push('/me/collectGoods')">
        <p>{{ $t('心愿清单') }}</p>
        <span>{{ goodNumber }}</span>
      </div>
      <div class="count-item" @click="$router.push('/me/collectShop')">
        <p>{{ $t('关注店铺') }}</p>
        <span>{{ shopNumber }}</span>
      </div>
    </div>
    <div class="address-wrap">
      <div class="address-tit">{{ $t('默认地址') }}</div>
      <div class="address-list">
        <div v-for="v in addressList" :key="v.id" class="address-item">
          <div class="address-info">
            <div class="name">{{ v.contacts }} &nbsp;&nbsp; {{ v.tel }}</div>
            <div class="address-switch">
              <van-switch v-model="v.isDefault" size="18" inactive-color="#DCDFE6" active-color="#d62014" @change="handleAddressSwitch(v)"></van-switch>
            </div>
          </div>
          <div class="address-text">{{ v.location }}</div>
        </div>
        <van-empty v-if="!addressList.length" :description="$t('暂无数据')" />
      </div>
    </div>
    <div class="address-add" @click="onAdd()">
      <span>+ {{ $t('新增地址') }}</span>
    </div>
    <div class="goods-wrap">
      <div class="goods-tit">{{ $t('商品收藏') }}</div>
      <div class="goods-list">
        <div v-for="v in goodsList" :key="v.id" class="goods-item" @click="openGoodsDetails(v)">
          <img :src="v.imgUrl1 || v.imgUrl2 || v.imgUrl3 || v.imgUrl4 || $defaultGoodsImage" alt="">
          <div class="goods-item-right">
            <div class="goods-name van-multi-ellipsis--l2">{{ v.name }}</div>
            <div class="goods-price">${{ priceFormat(v.sellingPrice) }}</div>
          </div>
        </div>
        <van-empty v-if="!goodsList.length" :description="$t('暂无数据')" />
      </div>
    </div>
    <div class="shop-wrap">
      <div class="shop-tit">{{ $t('关注店铺') }}</div>
      <div class="shop-list">
        <div v-for="v in shopList" :key="v.sellerId" class="shop-item" @click="openShop(v)">
          <img :src="v.sellerVo.avatar|| $defaultGoodsImage" alt="">
          <div class="shop-item-right">
            <div class="shop-name van-ellipsis">{{ v.sellerVo.name }}</div>
            <div class="shop-price">{{ $t("已售") }}：{{ priceFormatInt(v.sellerVo.soldNum) }}</div>
            <div class="shop-price">{{ $t("浏览量") }}：{{ priceFormat(v.sellerVo.viewsNum) }}</div>
            <div class="shop-price">{{ $t("好评率") }}：{{ Math.floor(v.sellerVo.highOpinion * 100) || 100 }}%</div>
          </div>
        </div>
        <van-empty v-if="!shopList.length" :description="$t('暂无数据')" />
      </div>
    </div>
    <AddressDetails ref="AddressDetailsRef" @closeAdd="(bool) => bool && getAddressData()" />
  </div>
</template>

<script>
import {
  dizhi_liebiao_post,
  dizhi_xiugai_post,
  focusSellerCount, focusSellerList,
  keepGoodsCount,
  keepGoodsList
} from "@/API/user";
import {Switch, SwipeCell, Toast, Empty} from 'vant';
import AddressDetails from "@/page/AddressDetails/index.vue";
import {priceFormat, priceFormatInt} from "@/utils/utis";
export default {
  components: {
    AddressDetails,
    [Switch.name]: Switch,
    [SwipeCell.name]: SwipeCell,
    [Empty.name]: Empty
  },
  data() {
    return {
      goodNumber: 0,
      shopNumber: 0,
      addressList: [],
      goodsList: [],
      shopList: []
    }
  },
  created() {
    this.getCount();
    this.getAddressData();
    this.getGoodsData()
    this.getShopData()

  },
  methods: {
    priceFormat,
    priceFormatInt,
    getCount() {
      keepGoodsCount().then((res) => {
        this.goodNumber = res || 0;
      });
      focusSellerCount().then((res) => {
        this.shopNumber = res || 0;
      });
    },
    getAddressData() {
      this.addressList = []
      dizhi_liebiao_post({}).then(res => {
        this.addressList = res.pageList.map(e => {
          return {
            ...e,
            tel: e.phone ? `+${e.phone.replace('|', ' ')}` : '',
            isDefault: e.use === 1,
            location: `${e.country} ${e.province} ${e.city} ${e.address}`
          }
        })
      })
    },
    getGoodsData() {
      keepGoodsList({
        pageNum: 1,
        pageSize: 8
      }).then((res) => {
        this.goodsList = res.pageList || []
      });
    },
    getShopData() {
      focusSellerList({
        pageNum: 1,
        pageSize: 8
      }).then((res) => {
        this.shopList = res.pageList || []
      });
    },
    // 修改默认地址
    handleAddressSwitch(item) {
      dizhi_xiugai_post({
        ...item,
        use: item.isDefault ? 1 : 0
      }).then(() => {
        this.getAddressData();
        Toast.success(this.$t("修改成功"));
      })
    },
    onAdd(id) {
      this.$refs.AddressDetailsRef.show(id)
    },
    openGoodsDetails(v) {
      this.$router.push({
        path: "/CommodityDetails",
        query: {
          sellerGoodsId: v.id,
        }
      })
    },
    openShop(v) {
      this.$router.push({
        path: "/shop",
        query: {
          sellerId: v.sellerId,
        },
      });
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard {
  padding: 20px;
  background-color: #FFFFFF;

  .count-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;

    .count-item {
      display: flex;
      flex-direction: column;
      border: 1px solid #eee;
      cursor: pointer;
      border-radius: 8px;
      padding: 15px 20px;

      > p {
        font-size: 14px;
        color: #606060;
      }

      > span {
        text-align: center;
        font-size: 22px;
        color: var(--main-color);
        margin-top: 15px;
      }
    }
  }

  .address-wrap {
    margin-top: 20px;
    border: 1px solid #EEEEEE;
    border-radius: 4px;

    .address-tit {
      height: 50px;
      line-height: 50px;
      padding: 0 13px;
      border-bottom: 1px solid #EEEEEE;
      display: flex;
      align-items: center;
      font-weight: 500;
      color: #606060;
      font-size: 14px;
    }

    .address-list {
      .address-item {
        padding: 10px;
        font-size: 12px;
        color: #606060;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #EEEEEE;

        .address-info {
          display: flex;
          align-items: center;
          justify-content: space-between;

          ::v-deep {
            .van-switch {
              border: 1px solid #DCDFE6;
            }
          }
        }

        .address-text {
          color: #999;
          font-weight: 500;
          margin-top: 10px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &:last-child {
          border-bottom: 0;
        }
      }

      ::v-deep .van-swipe-cell__right {
        display: flex;
        align-items: center;
        background-color: #fff;

        > .btn {
          height: 100%;
          min-width: 50px;
          padding: 0 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 12px;

          &.edit {
            background-color: #2B64F6;
          }

          &.del {
            background: var(--main-color);
          }
        }
      }
    }
  }

  .address-add {
    background-color: #fafafa;
    height: 60px;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    margin-top: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    > span {
      font-weight: 400;
      font-size: 18px;
      color: var(--main-color);
    }
  }

  .goods-wrap {
    margin-top: 20px;
    border: 1px solid #EEEEEE;
    border-radius: 4px;

    .goods-tit {
      height: 50px;
      line-height: 50px;
      padding: 0 13px;
      border-bottom: 1px solid #EEEEEE;
      display: flex;
      align-items: center;
      font-weight: 500;
      color: #606060;
      font-size: 14px;
    }

    .goods-list {
      .goods-item {
        padding: 10px;
        font-size: 12px;
        color: #606060;
        display: flex;
        border-bottom: 1px solid #EEEEEE;
        >img{
          width: 60px;
          height: 60px;
          margin-right: 10px;
          flex-shrink: 0;
          object-fit: contain;
        }
        &-right{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .goods-name{
            font-size: 12px;
            color: #333;
          }
          .goods-price{
            color: var(--main-color);
            font-size: 14px;
          }
        }
        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }
  .shop-wrap {
    margin-top: 20px;
    border: 1px solid #EEEEEE;
    border-radius: 4px;

    .shop-tit {
      height: 50px;
      line-height: 50px;
      padding: 0 13px;
      border-bottom: 1px solid #EEEEEE;
      display: flex;
      align-items: center;
      font-weight: 500;
      color: #606060;
      font-size: 14px;
    }

    .shop-list {
      .shop-item {
        padding: 10px;
        font-size: 12px;
        color: #606060;
        display: flex;
        border-bottom: 1px solid #EEEEEE;
        >img{
          width: 80px;
          height: 80px;
          margin-right: 10px;
          flex-shrink: 0;
          object-fit: contain;
        }
        &-right{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .shop-name{
            font-size: 14px;
            color: #333;
          }
          .shop-price{
            color: #606060;
            font-size: 12px;
          }
        }
        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }
}
</style>
